<template>
  <div class="list-common-table">
    <div class="container">
      <div class="header">
        <h1>Pets Home</h1>
        <button class="button" @click="handleClick">
          Quick Start
          <div class="button__horizontal"></div>
          <div class="button__vertical"></div>
        </button>
      </div>
      <div class="bird-container bird-container--one">
        <div class="bird bird--one"></div>
      </div>

      <div class="bird-container bird-container--two">
        <div class="bird bird--two"></div>
      </div>

      <div class="bird-container bird-container--three">
        <div class="bird bird--three"></div>
      </div>

      <div class="bird-container bird-container--four">
        <div class="bird bird--four"></div>
      </div>
    </div>
  </div>
  <t-row :gutter="18" class="flex-row">
    <t-col class="flex-col flex-col--left">
      <t-card class="card1" :bordered="false">
        <div class="swiper1">
          <t-swiper type="card" :duration="1500" :interval="4200" :navigation="{ showSlideBtn: 'hover' }">
            <t-swiper-item>
              <img src="../../../assets/image/dog4.png" width="500" height="500" />
            </t-swiper-item>
            <t-swiper-item>
              <img src="../../../assets/image/bird.jpg" width="500" height="500" />
            </t-swiper-item>
            <t-swiper-item>
              <img src="../../../assets/image/cat3.png" width="500" height="500" />
            </t-swiper-item>
            <t-swiper-item>
              <img src="../../../assets/image/cat4.jpg" width="500" height="500" />
            </t-swiper-item>
          </t-swiper>
        </div>
      </t-card>
    </t-col>
    <t-col class="flex-col flex-col--right">
      <t-card class="card2" :bordered="false">
        <div class="swiper2">
          <t-swiper
            :duration="1200"
            :height="500"
            :interval="6000"
            direction="vertical"
            :navigation="{ type: 'dots', size: 'large', showSlideBtn: 'never' }"
          >
            <t-swiper-item>
              <img fit="fill" src="../../../assets/image/dogsq1.jpg" width="505" height="500" />
            </t-swiper-item>
            <t-swiper-item>
              <img fit="fill" src="../../../assets/image/cat1.jpg" width="505" height="500" />
            </t-swiper-item>
            <t-swiper-item>
              <img fit="fill" src="../../../assets/image/dogsq2.png" width="505" height="500" />
            </t-swiper-item>
            <t-swiper-item>
              <img fit="fill" src="../../../assets/image/catlong1.jpg" width="505" height="500" />
            </t-swiper-item>
          </t-swiper>
        </div>
      </t-card>
    </t-col>
  </t-row>
  <div class="list-common-table">
    <h2 style="margin: 10px">精彩评论</h2>
    <t-list :split="true">
      <t-list-item v-for="(item, index) in commentsData" :key="index">
        <template #content>
          <t-comment :avatar="item.avatar" :author="item.author" :datetime="item.datetime" :content="item.content">
            <template #actions>
              <t-space key="thumbUp" :size="6">
                <t-icon name="thumb-up" />
                <span>{{ index + 7 }}</span>
              </t-space>
              <t-space key="chat" :size="6">
                <t-icon name="chat" />
                <span>回复</span>
              </t-space>
            </template>
          </t-comment>
        </template>
      </t-list-item>
    </t-list>
    <div style="margin: 15px">
      <t-comment
        avatar="https://cdn.pixabay.com/photo/2016/12/13/21/20/alien-1905155_1280.png"
        author="奥特神王"
        datetime="11月3日"
        content="妈妈给我买的小猫太可爱啦！"
        class="comment-reply"
      >
        <template #actions>
          <t-space key="thumbUp" :size="6">
            <t-icon name="thumb-up" />
            <span>6</span>
          </t-space>
          <t-space key="chat" :size="6">
            <t-icon name="chat" />
            <span>回复</span>
          </t-space>
        </template>

        <template #reply>
          <t-comment
            avatar="https://cdn.pixabay.com/photo/2021/04/29/07/36/lime-6215762_1280.jpg"
            datetime="今天 12:26"
            content="确实！"
          >
            <template #author>
              <span>柠檬不萌%</span>
              <t-icon name="caret-right-small" size="medium" style="margin: 0 4px" />
              <span>奥特神王</span>
            </template>

            <template #actions>
              <t-space key="thumbUp" :size="6">
                <t-icon name="thumb-up" />
                <span>2</span>
              </t-space>
              <t-space key="chat" :size="6">
                <t-icon name="chat" />
                <span>回复</span>
              </t-space>
            </template>
          </t-comment>
        </template>
      </t-comment>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const handleClick = () => {
  router.push({ path: '/shop/goods' });
};

const commentsData = [
  {
    id: 'A',
    avatar: 'https://cdn.pixabay.com/photo/2015/01/19/13/51/car-604019_1280.jpg',
    author: '墨色风云',
    datetime: '今天16:38',
    content: '宠物商店服务周到，宠物健康活泼，中年人的好选择！',
  },
  {
    id: 'B',
    avatar: 'https://cdn.pixabay.com/photo/2023/11/06/09/43/lotus-8369252_1280.jpg',
    author: '荷塘月色',
    datetime: '11月6日',
    content:
      '哎呀，这家宠物商店真是不错！我这60多岁的老太太去了都觉得特别温馨。小动物们都很健康活泼，店员也特别热心，给我这小孙子挑了个特别可爱的小狗，真是满意极了！',
  },
  {
    id: 'C',
    avatar: 'https://cdn.pixabay.com/photo/2024/03/03/12/42/ai-generated-8610368_1280.png',
    author: '刻晴天下第一',
    datetime: '11月4日',
    content: 'Pet-Home商店太棒了！全是二次元萌宠周边，快递小哥也是宅友，送货超快，宅心福音，大好评！(≧▽≦)/',
  },
];
</script>

<style scoped lang="less">
@import url('https://fonts.googleapis.com/css?family=Arima+Madurai:300');

.list-common-table {
  background-color: var(--td-bg-color-container);
  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
  border-radius: var(--td-radius-medium);

  .table-container {
    margin-top: var(--td-comp-margin-xxl);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

h1 {
  font-family: 'Arima Madurai', cursive;
  color: black;
  font-size: 4rem;
  letter-spacing: -3px;
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.6);
  position: relative;
  z-index: 3;
}

.container {
  z-index: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  // min-height: 100vh;
  min-height: 45rem;
  background-image: linear-gradient(to bottom, rgb(9, 83, 224) 0%, rgb(69, 116, 250) 100%),
    url('https://images.unsplash.com/photo-1446824505046-e43605ffb17f');
  background-blend-mode: soft-light;
  background-size: cover;
  background-position: center center;
  padding: 2rem;
}

.bird {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg);
  background-size: auto 100%;
  width: 88px;
  height: 125px;
  will-change: background-position;

  animation-name: fly-cycle;
  animation-timing-function: steps(10);
  animation-iteration-count: infinite;

  &--one {
    animation-duration: 1s;
    animation-delay: -0.5s;
  }

  &--two {
    animation-duration: 0.9s;
    animation-delay: -0.75s;
  }

  &--three {
    animation-duration: 1.25s;
    animation-delay: -0.25s;
  }

  &--four {
    animation-duration: 1.1s;
    animation-delay: -0.5s;
  }
}

.bird-container {
  position: absolute;
  top: 20%;
  left: -10%;
  transform: scale(0) translateX(-10vw);
  will-change: transform;

  animation-name: fly-right-one;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  &--one {
    animation-duration: 15s;
    animation-delay: 0s;
  }

  &--two {
    animation-duration: 16s;
    animation-delay: 1s;
  }

  &--three {
    animation-duration: 14.6s;
    animation-delay: 9.5s;
  }

  &--four {
    animation-duration: 16s;
    animation-delay: 10.25s;
  }
}

@keyframes fly-cycle {
  100% {
    background-position: -900px 0;
  }
}

@keyframes fly-right-one {
  0% {
    transform: scale(0.3) translateX(-10vw);
  }

  10% {
    transform: translateY(2vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(0vh) translateX(30vw) scale(0.5);
  }

  30% {
    transform: translateY(4vh) translateX(50vw) scale(0.6);
  }

  40% {
    transform: translateY(2vh) translateX(70vw) scale(0.6);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.6);
  }

  60% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.6);
  }
}

@keyframes fly-right-two {
  0% {
    transform: translateY(-2vh) translateX(-10vw) scale(0.5);
  }

  10% {
    transform: translateY(0vh) translateX(10vw) scale(0.4);
  }

  20% {
    transform: translateY(-4vh) translateX(30vw) scale(0.6);
  }

  30% {
    transform: translateY(1vh) translateX(50vw) scale(0.45);
  }

  40% {
    transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
  }

  50% {
    transform: translateY(0vh) translateX(90vw) scale(0.45);
  }

  51% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }

  100% {
    transform: translateY(0vh) translateX(110vw) scale(0.45);
  }
}

.button {
  --offset: 10px;
  --border-size: 2px;

  display: block;
  position: relative;
  padding: 1em 4em;
  appearance: none;
  border: 0;
  background: transparent;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  outline: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  border-radius: 0;
  box-shadow: inset 0 0 0 var(--border-size) currentcolor;
  transition: background 0.8s ease;

  &:hover {
    background: rgba(100, 0, 0, 0.03);
  }

  &__horizontal,
  &__vertical {
    position: absolute;
    top: var(--horizontal-offset, 0);
    right: var(--vertical-offset, 0);
    bottom: var(--horizontal-offset, 0);
    left: var(--vertical-offset, 0);
    transition: transform 0.8s ease;
    will-change: transform;

    &::before {
      content: '';
      position: absolute;
      border: inherit;
    }
  }

  &__horizontal {
    --vertical-offset: calc(var(--offset) * -1);
    border-top: var(--border-size) solid currentcolor;
    border-bottom: var(--border-size) solid currentcolor;

    &::before {
      top: calc(var(--vertical-offset) - var(--border-size));
      bottom: calc(var(--vertical-offset) - var(--border-size));
      left: calc(var(--vertical-offset) * -1);
      right: calc(var(--vertical-offset) * -1);
    }
  }

  &:hover &__horizontal {
    transform: scaleX(0);
  }

  &__vertical {
    --horizontal-offset: calc(var(--offset) * -1);
    border-left: var(--border-size) solid currentcolor;
    border-right: var(--border-size) solid currentcolor;

    &::before {
      top: calc(var(--horizontal-offset) * -1);
      bottom: calc(var(--horizontal-offset) * -1);
      left: calc(var(--horizontal-offset) - var(--border-size));
      right: calc(var(--horizontal-offset) - var(--border-size));
    }
  }

  &:hover &__vertical {
    transform: scaleY(0);
  }
}

.swiper1 {
  //position: relative;
  left: 15%;
  width: 800px;
  height: 500px;
  display: inline-block;
  align-content: center;
}
.card1 {
  // margin-top: 10px;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  background-color: #e3f0ff;
  position: relative;
  width: 100%;
  margin: 15px 0px;
  height: 530px;
}
.swiper2 {
  //position: relative;
  left: 15%;
  width: 505px;
  display: inline-block;
  align-content: center;
}
.card2 {
  // margin-top: 10px;
  position: relative;
  background-color: #e3f0ff;
  width: 100%;
  height: 530px;
  margin: 15px 0px;
}
.header {
  text-align: center; /* Center align text within the header */

  h1 {
    margin-top: 14rem; /* Space between h1 and button */
  }

  button {
    display: inline-block; /* Makes the button an inline-block element for better centering */
    margin-top: 12rem;
  }
}
.flex-row {
  display: flex;
  flex-wrap: nowrap; /* 防止换行 */
  justify-content: space-between; /* 两端对齐，中间留空隙 */
  width: 100%; /* 确保占满父容器宽度 */
}

.flex-col {
  flex: 1; /* 默认等分宽度 */

  &--left {
    flex: 2; /* 左边宽一点，占据2份 */
  }

  &--right {
    flex: 1; /* 右边窄一点，占据1份 */
  }
}
.comment-reply {
  > .t-comment__inner {
    > .t-comment__content {
      > .t-comment__actions {
        margin-right: 24px;
      }
    }
  }
}
</style>
